import React from 'react';
import { View, Text, Image, TextInput, TouchableOpacity, Platform, Dimensions } from 'react-native';
import JShareModule from 'jshare-react-native';
import loginService from '../../service/loginService';
import Utils from '../../utils';
import { Toast } from 'antd-mobile-rn';

const window = Dimensions.get("window");

export default class PhoneLogin extends React.Component {


    static navigationOptions = {
        title: "手机登陆",
        headerRight:(
            <View></View>
        )
    }

    state = {
        phone: ""
    }

    /**
 * 微信登录
 */
    handleWeixinLogin = () => {

        JShareModule.getSocialUserInfo({ platform: "wechat_session" }, (userInfo) => {
            console.log("weixin userinfo ::", userInfo);
            if (Platform.OS === 'android' && userInfo.code === 0) {
                //const originData = JSON.parse(userInfo.originData);
                //登录
                loginService.login({
                    loginType: 2,
                    nickName: userInfo.name,
                    openId: userInfo.openId,
                    headImg: userInfo.imageUrl,
                    // address:`${originData.province},${originData.city}` 
                }, this._loginResult);
            }
            if (Platform.OS === 'ios' && userInfo.openId) {
                loginService.login({
                    loginType: 2,
                    nickName: userInfo.name,
                    openId: userInfo.openId,
                    headImg: userInfo.iconUrl,
                    // address:`${originData.province},${originData.city}` 
                }, this._loginResult);
            }

            JShareModule.cancelAuthWithPlatform({ platform: "wechat_session" }, () => {

            })
        }, (e) => {
            console.log("weixin userinfo error ::", e);
        });

    }

    /**
 * 第3方登录回调
 */
    _loginResult = (user) => {
        console.log("result:user::", user);
        const { navigation } = this.props;
        // if (!user.bind) {
        //     //Utils.navigation(navigation,"BindPhone",{user:user});
        //     navigation.navigate("BindPhone", { user: user });
        //     return;
        // }
        Utils.navigation(navigation, "/app/home", { user: user });
    }
    /**
     * QQ登录
     */
    handleQQLogin = () => {
        const { navigate } = this.props.navigation;
        JShareModule.getSocialUserInfo({ platform: "qq" }, (userInfo) => {
            console.log("qq userinfo ::", userInfo);
            if (Platform.OS === 'android' && userInfo.code === 0) {
                const originData = JSON.parse(userInfo.originData);
                //登录
                loginService.login({
                    loginType: 3,
                    nickName: userInfo.name,
                    openId: userInfo.openId,
                    headImg: userInfo.imageUrl,
                    address: `${originData.province},${originData.city}`
                }, this._loginResult);
            }

            if (Platform.OS === 'ios' && userInfo.openId) {
                loginService.login({
                    loginType: 3,
                    nickName: userInfo.name,
                    openId: userInfo.openId,
                    headImg: userInfo.iconUrl,
                    // address:`${originData.province},${originData.city}` 
                }, this._loginResult);
            }

            JShareModule.cancelAuthWithPlatform({ platform: "qq" }, () => { });
        }, () => {
            console.log("qq userinfo error ::");
        })


    }

    componentDidMount() {

        if (Platform.OS === 'ios') {
            JShareModule.setup();
        }

        //JShareModule.setup();

        //BackHandler.addEventListener("hardwareBackPress",()=>true);
        // this.props.navigation.dispatch(StackActions.popToTop());



    }


    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ alignItems: "center", marginBottom: 20, marginTop: 50 }}>
                    <Image source={require("./img/s.png")} style={{ width: 100, height: 45 }}></Image>
                </View>
                <View style={{ padding: 10, marginBottom: 20 }}>
                    <View style={{ borderBottomWidth: 1, borderBottomColor: "#e6e6e6", flexDirection: "row", padding: 10,alignContent:"center",height:50,paddingBottom:20 }}>
                        <View style={{ width: "20%",alignItems:"center",height:40,justifyContent:"center" }}>
                            <Text style={{ fontSize: 14, color: "#1e1f44" }}>手机 +86</Text>
                        </View>
                        <View style={{ width: "80%",height:40,alignItems:"center" }}>
                            <TextInput value={this.state.phone} onChangeText={(value) => {
                                this.setState({
                                    phone: value
                                })
                            }} autoFocus={true} maxLength={11} keyboardType={"numeric"} placeholder={"请输入手机号"} placeholderTextColor="#969eb0" style={{ fontSize: 14, width: "100%",height:40 }}></TextInput>
                        </View>
                    </View>
                </View>
                <View style={{ padding: 10 }}>
                    <TouchableOpacity onPress={() => {
                        if (!this.state.phone || this.state.phone.length < 11) {
                            Toast.info("手机号码格式不正确");
                            return;
                        }
                        const { navigate } = this.props.navigation;
                        navigate("/app/login/phone/code", {
                            phone: this.state.phone
                        });
                    }} style={{ backgroundColor: "#1e1f44", borderRadius: 6, alignItems: "center", height: 48, justifyContent: "center" }}>
                        <Text style={{ color: "#fff", fontSize: 16 }}>下一步</Text>
                    </TouchableOpacity>
                </View>
                <View style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
                    <View style={{ height: 1, width: "40%", backgroundColor: "#d8d8d8" }}></View>
                    <View style={{ width: "20%", alignItems: "center" }}>
                        <Text style={{ fontSize: 14, color: "#697388" }}>其他方式</Text>
                    </View>
                    <View style={{ height: 1, width: "40%", backgroundColor: "#d8d8d8" }}></View>
                </View>
                <View style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
                    <TouchableOpacity onPress={this.handleWeixinLogin.bind(this)} style={{ height: 44, width: (window.width - 30) / 2, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", borderColor: "#969eb0", borderWidth: 1, borderRadius: 6 }}>
                        <Text style={{ color: "#969eb0", fontSize: 16 }}>微信</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this.handleQQLogin.bind(this)} style={{ height: 44, width: (window.width - 30) / 2, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", borderColor: "#969eb0", borderWidth: 1, borderRadius: 6, marginLeft: 10 }}>
                        <Text style={{ color: "#969eb0", fontSize: 16 }}>QQ</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }


}